<template>
  <div>
    <ul class="input-list" :class="column">
        <li class="list-item" v-for="item in options" :key="item.id">
          <input v-model="input" :type="inputType" :name="inputName" :id="item.id" :value="item.value">
          <label :for="item.id">{{ item.label }}</label>
        </li>
      </ul>
  </div>
</template>

<script>
export default {
  name: 'list',
  props: ['inputType', 'inputName', 'options', 'column', 'value'],
  data() {
    return {}
  },
  computed: {
    input: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('update:value', val)
      }
    }
  }
}
</script>

<style lang="less"  scoped>
ul {
  margin: 0;
  padding: 0;
  li {
    margin: 10px 0;
    list-style: none;
  }
}
.input-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 10px 0;

  &.column {
    flex-direction: column;
    align-items: flex-start;
  }
  >li.list-item {
    flex: 1 0 50%;
    line-height: 15px;
    >input {
      width: 16px;
      height: 16px;
      transform: translateY(3px);
    }
    >label {
      font-size:15px;
      color: #444444;
      font-weight: normal;
      line-height: 20px;
    }
  }
}
</style>